<script setup>
import {
  getBizAppointment,
  addBizAppointment,
  updateBizAppointment,
  findMaxSort
} from "@/api/biz/bizAppointment";
import { listBizUserInfo } from "@/api/biz/bizUserInfo";
import { usePagination } from "@/utils/composables";
const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } =
  usePagination();
const router = useRouter();
const props = defineProps({
  id: {
    type: [Number, String],
    default: ""
  }
});
const emit = defineEmits(["update:modelValue", "updateOk"]);
const formRef = ref();
const data = ref({
  loading: false,
  form: {
    id: props.id
  },
  rules: {
    name: [
      { required: true, message: "请输入登陆账号", trigger: "blur" },
      { validator: getcheckUserNameUnique }
    ]
  },
  userInfoList: []
});

onMounted(() => {
  if (data.value.form.id != "") {
    getInfo();
    getDataList();
  }
});
//
onBeforeUnmount(() => {
  if (data.value.formMode === "router") {
    eventBus.off("get-data-list");
  }
});

// 每页数量切换
function sizeChange(size) {
  onSizeChange(size).then(() => getDataList());
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList());
}

// 字段排序
function sortChange(prop, order) {
  onSortChange(prop, order).then(() => getDataList());
}

function getInfo() {
  data.value.loading = true;
  getBizAppointment(props.id).then((res) => {
    data.value.loading = false;
    data.value.form = res.data;
  });
}
function getDataList() {
  listBizUserInfo({ type: "1" }).then((res) => {
    data.value.userInfoList = res.data.list;
    pagination.value.total = res.data.total;
  });
}
function getcheckUserNameUnique(rule, value, callback) {
  if (data.value.form.id !== "" || data.value.form.id !== undefined) {
    callback();
  }
  const msg = "登陆账号已存在";
  if (value === "") {
    callback();
  } else {
    const checkData = {
      userName: value
    };
    checkUserNameUnique(checkData).then((response) => {
      if (response.data.code === "1") {
        callback();
      } else {
        callback(msg);
      }
    });
  }
}
function getupdateBizAppointment(row) {
  data.value.form.visitUserInfoId = row.id;

  updateBizAppointment(data.value.form).then(() => {
    ElMessage.success({
      message: "修改成功",
      center: true
    });
    emit("updateOk");
    // / callback && callback();
  });
}
defineExpose({});
</script>

<template>
  <div v-loading="data.loading">
    <el-table
      ref="table"
      v-loading="data.loading"
      class="list-table"
      :data="data.userInfoList"
      border
      highlight-current-row
      row-key="id"
      @sort-change="sortChange"
      @selection-change="data.batch.selectionDataList = $event"
    >
      >
      <el-table-column type="index" align="center" label="序号" width="80" />
      <el-table-column prop="avatar" label="头像" show-overflow-tooltip>
        <template v-slot="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="真实姓名" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="phone" label="电话" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="isShiming"
        label="是否实名"
        show-overflow-tooltip
        width="100"
        align="center"
      >
        <template v-slot="scope">
          <el-tag type="info" v-if="scope.row.isShiming == 0">未实名</el-tag>
          <el-tag type="success" v-else>已实名</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="80" align="center">
        <template #default="scope">
          <el-button-group>
            <el-button
              type="primary"
              size="small"
              text
              @click="getupdateBizAppointment(scope.row)"
            >
              选择</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    :current-page="pagination.page"
    :total="pagination.total"
    :page-size="pagination.size"
    :page-sizes="pagination.sizes"
    :layout="pagination.layout"
    :hide-on-single-page="false"
    class="pagination"
    background
    @size-change="sizeChange"
    @current-change="currentChange"
  />
</template>
